/*
*	Copyright (c) 2009 Brent Mombourquette
*
*	Permission is hereby granted, free of charge, to any person
*	obtaining a copy of this software and associated documentation
*	files (the "Software"), to deal in the Software without
*	restriction, including without limitation the rights to use,
*	copy, modify, merge, publish, distribute, sublicense, and/or sell
*	copies of the Software, and to permit persons to whom the
*	Software is furnished to do so, subject to the following
*	conditions:
*
*	The above copyright notice and this permission notice shall be
*	included in all copies or substantial portions of the Software.
*
*	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
*	EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
*	OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
*	NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
*	HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
*	WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
*	FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
*	OTHER DEALINGS IN THE SOFTWARE.
*
*	This file contains functions that control the overall HTML changing of the graph in graph_page.html.
*/

var graphHTMLControl = {

	/*
	 * Display a hover over effect for the button object with Id id
	 * @param {String} id		The Id of the button to lighten.
	 */
	goLite: function(id) {
		var btn = document.getElementById(id);
		btn.style.color = "#FF6347";
	},
	
	/*
	 * Remove the hover over effect for the button object with Id id
	 * @param {String} id		The Id of the button to lighten.
	 */
	goDim: function(id) {
		var btn = document.getElementById(id);
		btn.style.color = "#FFFFFF";
	},
	
	/*
	 * Create the event handlers for the context menu of a node.
	 * @param {DataNode} node
	 * @param {Particle} mNode
	 * @param {ForceDirectedLayout} layout
	 */
	displayNodeContext: function(node, mNode, layout) {
		graphHTMLControl.closeContexts(); // So we don't have multiple ones open at the same time
	
		// The context menu for each node is the same <div> except each time it is opened
		// the event handlers are updated to correspond to the proper node
		var context = document.getElementById("nodeContextMenu");
		
		var editTag = document.getElementById("editNode");
		editTag.onclick = new EventHandler( window, annotationEdit.node, node);
		
		var goTag = document.getElementById("go");
		goTag.onclick = new EventHandler( window, graphHTMLControl.goTo, node);
		
		var deleteNodeTag = document.getElementById("deleteNode");
		deleteNodeTag.onclick = new EventHandler( window, manipulateGraph.deleteNode, node, mNode, layout);
		
		var closeContextTag = document.getElementById("closeNode");
		closeContextTag.onclick = new EventHandler( window, graphHTMLControl.closeNodeContext);

		// Position the context menu with respect to the particle mNode's position and the window
		context.style.left=(mNode.positionX + (window.innerWidth - 5)/2 + 5) + "px";
		context.style.top=(mNode.positionY + (window.innerHeight - 5)/2) +  "px";
	    context.style.display = 'block';
	},
	
	/*
	 * Create the event handlers for the context menu of an edge.
	 * @param {Particle} p
	 * @param {SVG Polyline Element} edge
	 * @param {SVG G Element} layout
	 */
	displayEdgeContext: function(p, edge, edgeDOMContainer) {
		graphHTMLControl.closeContexts(); // So we don't have multiple contexts open at the same time
	
		var context = document.getElementById("edgeContextMenu");
		
		var editTag = document.getElementById("editEdge");
		editTag.onclick = new EventHandler( window, annotationEdit.edge, edge);
		
		var deleteEdgeTag = document.getElementById("deleteEdge");
		deleteEdgeTag.onclick = new EventHandler( window, manipulateGraph.deleteEdge, edge, edgeDOMContainer);
		
		var closeContextTag = document.getElementById("closeEdge");
		closeContextTag.onclick = new EventHandler( window, graphHTMLControl.closeEdgeContext);
		
		// Position the context menu with respect to p
		context.style.left=(p.positionX + (window.innerWidth - 5)/2 + 5) + "px";
		context.style.top=(p.positionY + (window.innerHeight - 5)/2) +  "px";
	    context.style.display = 'block';
	},
	
	/*
	 * Close the node context menu.
	 */
	closeNodeContext: function(){
		var context = document.getElementById("nodeContextMenu");
		context.style.display = 'none';
	},
	
	/*
	 * Close the edge context menu.
	 */
	closeEdgeContext: function(){
		var context = document.getElementById("edgeContextMenu");
		context.style.display = 'none';
	},
	
	/*
	 * Close both the edge and node context menus.
	 */
	closeContexts: function() {
		graphHTMLControl.closeNodeContext();
		graphHTMLControl.closeEdgeContext();
	},
	
	/*
	 * Display the tooltip for node, which show's its title or the user entered title.
	 * Globals: nodeDisplay [from graph_tab.js]
	 * @param {DataNode} node
	 * @param {Particle} mNode
	 */
	showNodeToolTip: function(node, mNode) {
		// Each node uses the same <div> for the tooltip, it is just 
		// updated upon each mouseover to display the proper information
		var tt = document.getElementById("tooltip");
		if (nodeDisplay == SHOW_THUMBNAIL) { 
			tt.innerHTML='<img src="' + node.img + '"/>';
		} else if (nodeDisplay == SHOW_TITLE) {
			tt.innerHTML = node.title
		} else { // Show both
			tt.innerHTML = '<img src="' + node.img + '"/><p>' + node.title + '</p>';
		}
		tt.style.display="block";
		tt.style.left=(mNode.positionX + (window.innerWidth - 5)/2 + 5) + "px";
		tt.style.top=(mNode.positionY + (window.innerHeight - 5)/2 - 25) +  "px";
	},
	
	/*
	 * Display the tooltip for edge, which show's its title or the user entered title.
	 * @param {Particle} p
	 * @param {SVG Polyline Element}  edge
	 */
	showEdgeToolTip: function(p, edge) {
		// Edges use the same <div> for the tooltip as nodes, in the same manner
		var tt = document.getElementById("tooltip");
		tt.innerHTML=edge.annotation;
		tt.style.display="block";
		tt.style.left=(p.positionX + (window.innerWidth - 5)/2 + 5) + "px";
		tt.style.top=(p.positionY + (window.innerHeight - 5)/2 - 25) +  "px";
		// Highlight the corresponding entry in the Session Trail panel
		sessionTrail.highlight(edge.idx);
	},
	
	/*
	 * Hide the edge tooltip.
	 * @param {SVG Polyline Element} edge
	 */
	hideEdgeToolTip: function(edge) {
		var tt = document.getElementById("tooltip");
		tt.style.display="none";
		// Unhighlight the corresponding entry in the Session Trail panel
		sessionTrail.unhighlight(edge.idx);
	},
	
	/*
	 * Hide the node tooltip.
	 * @param {DataNode} node
	 */
	hideNodeToolTip: function(node) {
		var tt = document.getElementById("tooltip");
		tt.style.display="none";
	},
	
	/*
	 * Open a tab and load node's URL.
	 * @param {DataNode} node
	 */
	goTo: function(node) {
		window.opener.getBrowser().selectedTab = window.opener.getBrowser().addTab(node.url);
		graphHTMLControl.closeNodeContext();
	},
	
	/*
	 * Update the title of the node corresponding to row number row in the database.
	 * @param {Integer} row
	 */
	changeTitle: function(row) {
		var DOMnode = document.getElementById("node:"+row);
		DOMnode.node.title = database.getTitle(row);
	}
}